/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-22 14:45:36
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
} from 'react-native';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
  fontColorDeepGray,
  fontColorBlack,
} from '@/styles';
import { Button } from '@/common';
import {
  iconSuccessTextGreen,
  iconUnderReviewCoffee,
  iconFailureTextRed,
} from '@/images';

export default class ApplyInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const { applicationInsuranceDetail } = this.props;

    return (
      <View style={styles.wrap}>
        <View style={styles.item}>
          <Text style={styles.label}>发动机号</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.engineNo || '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>车辆种类</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.carType
              ? applicationInsuranceDetail.carType.name
              : '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>车架号</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.carframeNo || '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>投保联系人</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.insureLinkMan || '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>投保联系方式</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.insureLinkPhone || '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>所属物流公司</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.inCompanyName || '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>车主类型</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.carOwnerType
              ? applicationInsuranceDetail.carOwnerType.name
              : '-'}
          </Text>
        </View>
        <View style={styles.item}>
          <Text style={styles.label}>车主名称</Text>
          <Text style={styles.desc}>
            {applicationInsuranceDetail.carOwnerName || '-'}
          </Text>
        </View>
        {this._renderStatus(applicationInsuranceDetail.auditStatus)}
      </View>
    );
  }

  _renderStatus = (applicationStatus) => {
    if (!applicationStatus) {
      return null;
    }
    switch (applicationStatus.code) {
    // 审核中
    case 'WAIT_AUDIT':
      return (
        <>
          <Image
            source={iconUnderReviewCoffee}
            style={styles.iconTextImg}
            resizeMode='stretch'
          />
        </>
      );
      // 审批通过
    case 'APPROVED':
      return (
        <>
          <Image
            source={iconSuccessTextGreen}
            style={styles.iconTextImg}
            resizeMode='stretch'
          />
        </>
      );
      // 审批拒绝
    case 'REJECT':
      return (
        <>
          <Image
            source={iconFailureTextRed}
            style={styles.iconTextImg}
            resizeMode='stretch'
          />
        </>
      );
    }
  };
}
const styles = StyleSheet.create({
  wrap: {
    width: screenWidth,
    height: px2dp(608),
    backgroundColor: mainBgColorWhite,
    marginTop: px2dp(24),
    paddingVertical: px2dp(16),
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(16),
  },
  label: {
    fontSize: px2dp(28),
    color: fontColorDeepGray,
    width: px2dp(264),
  },
  desc: {
    fontSize: px2dp(28),
    color: fontColorBlack,
    fontWeight: 'bold',
  },
  iconTextImg: {
    width: px2dp(169),
    height: px2dp(114),
    position: 'absolute',
    right: px2dp(50),
    top: px2dp(50),
  },
});
